<script setup lang="ts">
import { ref } from 'vue'
import { Star, Plus, Edit, Delete, Calendar } from '@element-plus/icons-vue'

interface Goal {
  id: number
  title: string
  description: string
  deadline: string
  progress: number
  status: 'completed' | 'in_progress' | 'pending'
  priority: 'high' | 'medium' | 'low'
  milestones: {
    id: number
    title: string
    completed: boolean
    deadline: string
  }[]
}

const goals = ref<Goal[]>([
  {
    id: 1,
    title: '掌握Vue3和TypeScript',
    description: '在一个月内深入学习Vue3和TypeScript，完成一个完整的项目',
    deadline: '2024-04-13',
    progress: 60,
    status: 'in_progress',
    priority: 'high',
    milestones: [
      { id: 1, title: '学习Vue3基础', completed: true, deadline: '2024-03-20' },
      { id: 2, title: '掌握TypeScript', completed: false, deadline: '2024-03-27' },
      { id: 3, title: '项目实战', completed: false, deadline: '2024-04-13' },
    ],
  },
  {
    id: 2,
    title: '健身计划',
    description: '每周至少运动3次，每次30分钟以上',
    deadline: '2024-06-30',
    progress: 30,
    status: 'in_progress',
    priority: 'medium',
    milestones: [
      { id: 1, title: '制定计划', completed: true, deadline: '2024-03-01' },
      { id: 2, title: '坚持一个月', completed: false, deadline: '2024-04-01' },
    ],
  },
])

const activeTab = ref('all')
const tabs = [
  { label: '全部目标', value: 'all' },
  { label: '进行中', value: 'in_progress' },
  { label: '已完成', value: 'completed' },
  { label: '待开始', value: 'pending' },
]

const getStatusColor = (status: string) => {
  const colors = {
    completed: 'var(--laser-cyan)',
    in_progress: 'var(--supernova-orange)',
    pending: 'var(--hologram-purple)',
  }
  return colors[status as keyof typeof colors] || 'var(--text-secondary)'
}

const getPriorityColor = (priority: string) => {
  const colors = {
    high: 'var(--supernova-orange)',
    medium: 'var(--laser-cyan)',
    low: 'var(--hologram-purple)',
  }
  return colors[priority as keyof typeof colors] || 'var(--text-secondary)'
}

const toggleMilestone = (goalId: number, milestoneId: number) => {
  const goal = goals.value.find((g) => g.id === goalId)
  if (goal) {
    const milestone = goal.milestones.find((m) => m.id === milestoneId)
    if (milestone) {
      milestone.completed = !milestone.completed
      // 更新目标进度
      const completedCount = goal.milestones.filter((m) => m.completed).length
      goal.progress = Math.round((completedCount / goal.milestones.length) * 100)
      // 更新目标状态
      if (goal.progress === 100) {
        goal.status = 'completed'
      } else if (goal.progress > 0) {
        goal.status = 'in_progress'
      }
    }
  }
}
</script>

<template>
  <div class="galaxy-container">
    <el-card class="header-card">
      <div class="header-content">
        <div class="title-section">
          <h2>银河探索</h2>
          <p>在这里管理你的目标，让梦想照进现实</p>
        </div>
        <el-button type="primary" :icon="Plus" class="glow-button"> 创建新目标 </el-button>
      </div>
    </el-card>

    <el-card class="goals-card">
      <template #header>
        <div class="card-header">
          <el-tabs v-model="activeTab" class="goal-tabs">
            <el-tab-pane
              v-for="tab in tabs"
              :key="tab.value"
              :label="tab.label"
              :name="tab.value"
            />
          </el-tabs>
        </div>
      </template>

      <div class="goals-grid">
        <el-card v-for="goal in goals" :key="goal.id" class="goal-card" :class="goal.status">
          <div class="goal-header">
            <div class="goal-title">
              <el-icon><Star /></el-icon>
              <span>{{ goal.title }}</span>
            </div>
            <div class="goal-actions">
              <el-button type="text" :icon="Edit" circle />
              <el-button type="text" :icon="Delete" circle />
            </div>
          </div>

          <div class="goal-description">{{ goal.description }}</div>

          <div class="goal-info">
            <div class="info-item">
              <el-icon><Calendar /></el-icon>
              <span>截止日期：{{ goal.deadline }}</span>
            </div>
            <div class="info-item">
              <el-tag :style="{ backgroundColor: getPriorityColor(goal.priority) }" size="small">
                {{
                  goal.priority === 'high'
                    ? '高优先级'
                    : goal.priority === 'medium'
                      ? '中优先级'
                      : '低优先级'
                }}
              </el-tag>
            </div>
          </div>

          <div class="goal-progress">
            <el-progress
              :percentage="goal.progress"
              :color="getStatusColor(goal.status)"
              :show-text="false"
              :stroke-width="4"
            />
          </div>

          <div class="milestones">
            <div class="milestones-title">里程碑</div>
            <div class="milestones-list">
              <div
                v-for="milestone in goal.milestones"
                :key="milestone.id"
                class="milestone-item"
                :class="{ completed: milestone.completed }"
                @click="toggleMilestone(goal.id, milestone.id)"
              >
                <el-checkbox
                  v-model="milestone.completed"
                  :disabled="true"
                  class="milestone-checkbox"
                />
                <div class="milestone-content">
                  <div class="milestone-title">{{ milestone.title }}</div>
                  <div class="milestone-deadline">{{ milestone.deadline }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.galaxy-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  h2 {
    margin: 0;
    font-size: 24px;
    background: var(--wormhole-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  p {
    margin: 5px 0 0;
    color: var(--text-secondary);
  }
}

.goals-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.goal-tabs {
  :deep(.el-tabs__nav-wrap::after) {
    background-color: var(--border-color);
  }

  :deep(.el-tabs__item) {
    color: var(--text-secondary);

    &.is-active {
      color: var(--laser-cyan);
    }

    &:hover {
      color: var(--laser-cyan);
    }
  }

  :deep(.el-tabs__active-bar) {
    background-color: var(--laser-cyan);
    height: 2px;
  }
}

.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.goal-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-shadow);
  }

  &.completed {
    border-color: var(--laser-cyan);
  }

  &.in_progress {
    border-color: var(--supernova-orange);
  }

  &.pending {
    border-color: var(--hologram-purple);
  }
}

.goal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.goal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);

  .el-icon {
    color: var(--laser-cyan);
  }
}

.goal-actions {
  display: flex;
  gap: 8px;
}

.goal-description {
  color: var(--text-secondary);
  margin-bottom: 15px;
  line-height: 1.6;
}

.goal-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
}

.goal-progress {
  margin-bottom: 15px;
}

.milestones {
  .milestones-title {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 10px;
  }
}

.milestones-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.milestone-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(0, 255, 209, 0.1);
  }

  &.completed {
    opacity: 0.7;
  }
}

.milestone-checkbox {
  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: var(--laser-cyan);
    border-color: var(--laser-cyan);
  }
}

.milestone-content {
  flex: 1;
}

.milestone-title {
  font-size: 14px;
  color: var(--text-primary);
}

.milestone-deadline {
  font-size: 12px;
  color: var(--text-secondary);
}

.glow-button {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine 3s infinite;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}
</style>
